<script setup>
import Footer from "@/components/Footer.vue";
import router from "@/router";
import { useRoute } from "vue-router";
import { ref, reactive, onMounted } from "vue"; 
import server from "@/utils/axiosUtils.js";
import { getOneHpService ,getOneMlService,createOrderService} from "@/api/hospital";
import { user } from "@/stores/counter.js";
import { ElMessage,ElMessageBox } from "element-plus";
const hospital = ref({});

const selectday=ref();
const meal = ref({});
const birthday = ref('');
const hpId = ref(0);
const smId=ref(0);

function toAppointmentsuccess(){
    router.push("/appointmentsuccess")
}

const payForm = ref(null);
const pay = (orderId) => {
    server({
        url: "/pay/alipay",
        method: "get",
        params: {
            orderId: orderId,
        }
    }).then(res => {
      payForm.value.innerHTML = res;
      console.log(payForm.value);
      window.document.forms[0].submit()
    });
}

const createOrder= async ()=>{
    await createOrderService({
        date:selectday.value,
        hpId:Number(hpId.value),
        smId:Number(smId.value)
    }).then(res=>{
        if(res.code==200){
            //console.log(res)
            pay(res.data.orderid);
        }else{
            ElMessage.warning(res.message);
        }
    })
}


const route = useRoute();
const getOneHp = async () => {
  let result = await getOneHpService(hpId.value);
  //console.log(result)
  if (result.code == 200) {
    hospital.value = result.data;
  }
};
const getOneMl = async () => {
  let result = await getOneMlService(smId.value);
  console.log(result)
  if (result.code == 200) {
    meal.value = result.data;
  }
};
const userInfo = user();

onMounted(async () => {
    hpId.value=route.query.hpId;
    smId.value=route.query.smId;
    selectday.value=route.query.selectday;
    //await getPersonInfo();
    await getOneHp();
    await getOneMl();
    const date=new Date(userInfo.birthday);
    birthday.value= date.toLocaleDateString('en-CA');
});


</script>

<template>
<!--  pay Container-->
    <div ref="payForm"></div>
    <!-- 总容器 -->
    <div class="wrapper">
        <header>
            <i class="fa fa-angle-left" onclick="history.go(-1)"></i>
            <p>确认您的订单</p>
            <div></div>
        </header>
        <div class="top-ban"></div>

        <section >
            <div class="title">
                <p>体检人信息</p>
            </div>
            <table>
                <tr>
                    <td>姓名:</td>
                    <td>{{userInfo.realName}}</td>
                </tr>
                <tr>
                    <td>证件号码:</td>
                    <td>{{userInfo.identityCard}}</td>
                </tr>
                <tr>
                    <td>出生日期:</td>
                    <td>{{ birthday }}</td>
                </tr>
                <tr>
                    <td>手机号码:</td>
                    <td>{{userInfo.phone}}</td>
                </tr>
            </table>
            <div class="title">
                <p>体检日期</p>
            </div>
            <table>
                <tr>
                    <td>{{selectday}}</td>
                </tr>
            </table>
            <div class="title">
                <p>体检机构</p>
            </div>
            <table>
                <tr>
                    <td colspan="2">{{hospital.name}}</td>
                </tr>
                <tr>
                    <td>营业时间:</td>
                    <td>{{hospital.businessHours}}</td>
                </tr>
                <tr>
                    <td>采血截止:</td>
                    <td>{{hospital.deadline}}</td>
                </tr>
                <tr>
                    <td>机构电话:</td>
                    <td>{{hospital.telephone}}</td>
                </tr>
                <tr>
                    <td>机构地址:</td>
                    <td>{{hospital.address}}</td>
                </tr>
            </table>
            <div class="title">
                <p>套餐类型</p>
            </div>
            <table>
                <tr>
                    <td>{{ meal.name }}</td>
                </tr>
            </table>
        </section>
        
        <div class="bottom-btn">
            <div class="first">实付款: <span>{{ meal.price }}</span></div>
            <div class="last" @click="createOrder">确认支付</div>
        </div>
        <div class="bottom-ban"></div>
        <Footer>

        </Footer>
    </div>

</template>

<style scoped>
@import "@/assets/css/confirmorder.css";
@import "@/assets/framework/reset.css";
@import "@/assets/framework/font-awesome/css/font-awesome.min.css";
</style>
